/*
 * @Description: 游戏配置管理 - 自定义基线tab
 * @Date: 2023-06-02 09:44:43
 * @Author: jiao-xiao-lin
 */
import React, { useEffect, useState } from 'react';
import { Input, Button, Pagination } from 'antd';
import { FormOutlined, CloseOutlined } from '@ant-design/icons';
import _, { forEach } from 'lodash';
import EditTable from '@/component/EditTable/customBaseLine.jsx';
import CreateModal from './CreateModal';
import { columns } from './config';
import styles from './index.less';
import exportlog from '../../../../assets/exportlog.png';
import { getAllBaseLine, getBaseLineDetail } from '@/api/game_managememnt';

const { Search } = Input;

const CustomBaseline = () => {
  // 基线卡片列表
  const [cardInfo, setCardInfo] = useState({ list: [], total: 0 });
  // 当前选中的基线卡片
  const [selectedCard, setSelectCard] = useState('');
  // 编辑的基线数据
  const [editCardData, setEditCardData] = useState({});
  // 基线列表
  const [tableInfo, setTableInfo] = useState({ list: [], total: 0 });
  // 是否显示创建自定义基线弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 子组件添加基线列表，父组件渲染标识
  const [listData, setListData] = useState([]);
  // 存储当前点击卡片的customId传递给表格组件
  const [customValue, setCustom] = useState();

  // 查询基线表格列表
  const queryTableList = (val, num) => {
    let arr = [];
    if (val) {
      forEach(val, (item) => {
        arr.push({
          customId: num,
          gameName: item.gameName,
          fullFrame: item.fullFrame,
          frameQuota: item.frameQuota,
          jitterQuota: item.jitterQuota,
          catonQuota: item.catonQuota,
          worstDropFpsQuota: item.worstDropFpsQuota,
          resolutionQuota: item.resolutionQuota,
        });
      });
    }
    setCustom(num);
    setTableInfo({ list: arr, total: 33, customId: num });
  };

  // 查询基线卡片列表
  const queryCardList = (num, searchValue = '') => {
    let arr = [];
    for (let i = 0; i < num; i++) {
      arr.push({
        id: i,
        name: `${i}${searchValue}音视频测试-视频流畅性测试`,
        date: `2023-05-31 16:00:00`,
        personnelNo: `${i}${i}${i}${i}`,
      });
    }

    // setCardInfo({ list: arr, total: 14 });
    // 默认选中第一个基线卡片
    // if (arr?.length) {
    //   setSelectCard(arr[0].id);
    //   queryTableList(arr[0].id, 8);
    // }
  };

  // 显示/隐藏创建自定义基线弹窗
  const changeModalShow = (val) => {
    setIsModalOpen(val);
  };

  // 点击基线卡片
  const handleChickCard = async (val, id) => {
    // 点击基线卡片，调用基线详情接口
    const resp = await getBaseLineDetail({
      customId: val.id,
      projectId: '614',
      page: '1',
      rows: '10',
    });
    // 获取基线对应详情数据，随即进行列表展示
    setSelectCard(id);
    // queryTableList(id, id);
    queryTableList(resp.data.data.baseLineDetailList, id);
  };

  // 编辑基线卡片
  const handleEdit = (e, data) => {
    e.stopPropagation();
    setEditCardData(data);
    changeModalShow(true);
  };

  // 新增基线表格
  const addTableRow = (data) => {
    setTableInfo((prevState) => {
      return { ...prevState, list: data };
    });
  };

  // useEffect(() => {
  //   queryCardList(8);
  // }, []);

  // 页面初始化获取所有的基线卡片列表
  useEffect(() => {
    async function fetchData() {
      const { data } = await getAllBaseLine({ projectId: '614' });
      setCardInfo({ list: data.data, total: 14 });
    }
    fetchData();
  }, [listData]);

  // 监听基线卡片列表是否有变化
  const acceptValue = (value) => {
    setListData(value);
  };

  return (
    <div className={styles.customBaselineWarp}>
      <div className={styles.title}>
        <div className={styles.title_black}></div>
        自定义基线列表
      </div>
      {/* <div className={styles.title}>自定义基线列表</div> */}

      <div className={styles.filterBox}>
        <Search
          className={styles.input}
          placeholder="请输入基线名称"
          onSearch={(val) => queryCardList(3, val)}
        />
        <Button onClick={() => changeModalShow(true)} className={styles.addBtn}>
          添加
        </Button>
      </div>

      {/* 卡片组 */}
      <div className={styles.divCard}>
        <div className={styles.cardBox}>
          {_.map(cardInfo?.list, (item, index) => {
            const { id, name, date, personnelNo } = item;
            // const { name, date, personnelNo } = item;
            return (
              <div
                key={index}
                className={`${styles.card_single} ${
                  selectedCard === id ? styles.card_selected : ''
                }`}
                onClick={() => handleChickCard(item, id)}
              >
                <CloseOutlined className={styles.icon_del} />
                <img className={styles.exportImg} src={exportlog}></img>
                <div className={styles.card_main}>
                  <div>
                    <div className={styles.name}>{name}</div>
                    <div className={styles.value}>{date}</div>

                    <div className={styles.value}>{personnelNo}</div>
                  </div>

                  <FormOutlined
                    className={styles.icon_edit}
                    onClick={(e) => handleEdit(e, item)}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>
      {/* 分页器 */}
      <div className={styles.page}>
        <Pagination
          className={styles.paginationBox}
          total={cardInfo.total}
          showQuickJumper
          showTotal={(total) => `共 ${total} 页`}
        />
      </div>

      <div className={styles.title}>
        <div className={styles.title_black}></div>
        基线表格
      </div>
      <EditTable
        columns={columns}
        dataSource={tableInfo.list}
        customValue={customValue}
        rowKey="id"
        setList={addTableRow}
      />

      {/* 创建自定义基线弹窗 */}
      <CreateModal
        visible={isModalOpen}
        detail={editCardData}
        changeModalShow={changeModalShow}
        click={acceptValue}
      />
    </div>
  );
};

export default CustomBaseline;
